<template>
  <div>
    <template v-for="(item, index) in options" :index="index">
      <template v-if="item.dataType == 'ObjectData'">
        <jax-desc :title="item.label">
          <jax-form-group
            :json="item.json"
            v-model="moduleDetail.moduleData[item.name]"
            style="max-width: 409px"
          ></jax-form-group>
        </jax-desc>
      </template>
      <template v-else-if="item.dataType == 'ArrayData'">
        <ArrayData :title="item.label" v-model="moduleDetail.moduleData[item.name]" :json="item.json" />
      </template>
      <template v-else>
        <jax-form-group
          :json="item.json"
          v-model="moduleDetail.moduleData"
          style="max-width: 409px"
        ></jax-form-group>
      </template>
    </template>
  </div>
</template>
<script setup>
import ArrayData from './ArrayData.vue'
const props = defineProps({
  title: String,
  moduleValue: String,
  moduleDetail: Object,
})

const data = {}
const options = computed(() => {
  const { moduleDetail } = props
  if (!moduleDetail) return []

  const arr = []
  moduleDetail.model.modelSchema.map(modelItem => {
    arr.push({
      label: modelItem.label,
      name: modelItem.name || modelItem.label,
      dataType: modelItem.dataType,
      json: toJson(modelItem),
    })
  })

  return arr
})

function toJson(modelItem) {
  const json = []
  if (modelItem.dataType == 'ObjectData') {
    modelItem.options.map(option => {
      json.push({
        label: option.label,
        name: option.name || option.label,
      })
    })
  } else if (modelItem.dataType == 'ArrayData') {
    modelItem.options.map(option => {
      json.push({
        label: option.label,
        name: option.name || option.label,
      })
    })
  } else {
    json.push({
      label: modelItem.label,
      name: modelItem.name || modelItem.label,
    })
  }

  return json
}
</script>
<style lang="scss" scoped></style>
